const {
  override,
  addWebpackAlias,
  overrideDevServer,
  watchAll,
  // addPostcssPlugins,
  // addLessLoader,
  // addBundleVisualizer
} = require('customize-cra')
const { resolve } = require('path')
const addProxy = proxy => config => {
  config.proxy = proxy
  return config
}
const httpsRE = /^https:\/\//

const proxy = [['/api', 'localhost:8080']]
function createProxy(list = []) {
  const ret = {}
  for (const [prefix, target] of list) {
    const isHttps = httpsRE.test(target)
    // https://github.com/http-party/node-http-proxy#options
    ret[prefix] = {
      target: target,
      changeOrigin: true,
      ws: true,
      rewrite: path => path.replace(new RegExp(`^${prefix}`), ''),
      // https is require secure=false
      ...(isHttps ? { secure: false } : {}),
    }
  }
  return ret
}
module.exports = {
  webpack: override(
    addWebpackAlias({
      '@page': resolve(__dirname, 'src/page'),
      '@assets': resolve(__dirname, 'src/assets'),
      '@components': resolve(__dirname, 'src/components'),
      '@type': resolve(__dirname, 'src/types'),
      '@actions': resolve(__dirname, 'src/actions'),
      '@constants': resolve(__dirname, 'src/constants'),
      '@config': resolve(__dirname, '/src/config'),
      '@layout': resolve(__dirname, 'src/layout'),
      '@reducers': resolve(__dirname, 'src/reducers'),
      '@utils': resolve(__dirname, 'src/utils'),
      '@hoc': resolve(__dirname, 'src/hoc'),
      '@service': resolve(__dirname, 'src/service'),
    })
    // ! 分析依赖，根据打包后过大的bundle进行处理优化
    // addBundleVisualizer()
    // ! 如果需要定制antd主题 就需要打开这里的注释
    // ! antd 所有的less配置 @see https://github.com/ant-design/ant-design/blob/master/components/style/themes/default.less
    // addLessLoader({
    //   modifyVars: {
    //     'primary-color': '#1f1f1f',
    //   },
    //   javascriptEnabled: true,
    // }),
    // ! 如果需要移动端适配的话 就配置这里  addPostcssPlugins书写必须在addLessLoader下方 不然会导致失效
    // addPostcssPlugins([
    //   postcssPxToViewport({
    //     unitToConvert: 'px', // 默认值`px`，需要转换的单位
    //     viewportWidth: 1440, //视窗的宽度，对应的是我们设计稿的宽度
    //     viewportHeight: 1334, // 视窗的高度，根据750设备的宽度来指定，一般指定1334，也可以不配置
    //     unitPrecision: 3, //指定`px`转换为视窗单位值的小数位数，默认是5(很多时候无法整除)
    //     viewportUnit: 'vw', //指定需要转换成的视窗单位，建议使用vw
    //     fontViewportUnit: 'vw', //指定字体需要转换成的视窗单位，默认vw;
    //     selectorBlackList: ['.ignore'], //指定不转换为视窗单位的类
    //     minPixelValue: 1, // 小于或等于`1px`不转换为视窗单位
    //     mediaQuery: true, // 允许在媒体查询中转换`px`，默认false
    //     exclude: [/node_modules/], //如果是regexp, 忽略全部匹配文件;如果是数组array, 忽略指定文件.
    //   }),
    // ])
  ),
  devServer: overrideDevServer(
    // 在这里写proxy配置
    addProxy(createProxy(proxy)),
    watchAll()
  ),
}
